<template>
<el-container>
  <el-header>
    <topNavbar :content="title" :path="path" :title="titleName"></topNavbar>
  </el-header>
  <el-main>
    <el-form ref="info" :model="info">
      <el-form-item label="项目名称" v-if="baseinfo.hasOwnProperty('name')">
        <el-input v-model="baseinfo.name" disabled class="w300"></el-input>
      </el-form-item>
      <el-row type="flex" v-if="baseinfo.hasOwnProperty('name')">
        <el-col :span="6">
          <el-form-item label="项目编号" prop="batch_id">
            <el-input v-model="baseinfo.batch_id" disabled placeholder="尚未选择项目" class="w300"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="执行单位" prop="company">
            <el-input v-model="baseinfo.company" disabled placeholder="尚未选择项目" class="w300"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item prop="dept">
            <el-input v-model="baseinfo.dept" disabled placeholder="尚未选择项目" style="width: 150px;"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" v-if="baseinfo.hasOwnProperty('name')">
        <el-col :span="6">
          <el-form-item label="客户名称">
            <el-input v-model="baseinfo.partner_id" disabled placeholder="尚未选择项目" class="w300"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='6'>
          <el-form-item label="立项时间">
            <el-input v-model="baseinfo.created_at" disabled placeholder="尚未选择项目" class="w300"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--用车申请-->
      <template v-if="info.type == 6">
        <el-form-item label="用车需求">
          <el-input v-model="info.title" placeholder="用车需求" class="w300" :disabled="info.disabled"></el-input>
        </el-form-item>
        <el-form-item label="用车车型" >
          <el-input v-model="info.tracffic_from" placeholder="用车车型" class="w300" :disabled="info.disabled"></el-input>
        </el-form-item>

        <el-form-item label="用车日期" prop="date">
          <el-date-picker
            v-model="info.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :disabled="info.disabled"
          >
          </el-date-picker>
        </el-form-item>
      </template>
    <!--      交通-->
      <template v-if="info.type == 9">
        <el-form-item label="交通申请人">
          <el-input v-model="info.title" placeholder="交通申请人" class="w300" :disabled="info.disabled"></el-input>
        </el-form-item>

        <el-row>
          <el-col :span="6">
            <el-form-item label="交通类型">
              <el-select v-model="info.tracffic_type" placeholder="交通类型" class="w300" :disabled="info.disabled">
                <el-option :label="v.name" :key="v.id" :value="v.id" v-for="v in tracfficList"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="交通时段">
              <el-select v-model="info.tracffic_area" placeholder="交通时段" class="w300" :disabled="info.disabled">
                <el-option :label="vv.name" :key="vv.id" :value="vv.id" v-for="vv in tracfficArea"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="交通始发">
              <el-input v-model="info.tracffic_from" placeholder="交通始发站" class="w300" :disabled="info.disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="交通到达">
              <el-input v-model="info.tracffic_to" placeholder="交通到达站" class="w300" :disabled="info.disabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="交通人数">
          <el-input v-model="info.people_num" placeholder="交通人数" class="w300" type="number" :disabled="info.disabled"></el-input>
        </el-form-item>

        <el-form-item label="交通日期" prop="date">
          <el-date-picker
            v-model="info.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :disabled="info.disabled"
          >
          </el-date-picker>
        </el-form-item>
      </template>
<!--      加班-->
      <template v-if="info.type == 5">
        <el-form-item label="加班名称">
          <el-input v-model="info.title" placeholder="加班名称" class="w300" :disabled="info.disabled"></el-input>
        </el-form-item>

        <el-row type="flex">
          <el-col :span="6">
            <el-form-item label="加班时间">
              <el-date-picker
                v-model="info.date"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                :disabled="info.disabled"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="加班人数">
              <el-input-number v-model="info.people_num" @change="calculateFee" label="加班人数" :disabled="info.disabled"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="加班金额">
          <el-input v-model="info.money" placeholder="加班金额" class="w300" disabled></el-input>
        </el-form-item>
      </template>
<!--      物料-->
      <template v-if="info.type == 8">
        <el-form-item label="物料名称">
          <el-input v-model="info.title" placeholder="物料名称" class="w300" :disabled="info.disabled"></el-input>
        </el-form-item>
      </template>
<!--      行政报销-->
      <template v-if="info.type == 4">
        <el-form-item label="标题">
          <el-input v-model="info.title" placeholder="请输入标题" class="w300" :disabled="info.disabled"></el-input>
        </el-form-item>

        <el-row>
          <el-col :span="6">
            <el-form-item label="金额">
              <el-input v-model="info.money" placeholder="请输入金额" class="w300" :disabled="info.disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="报销日期">
              <el-date-picker
                v-model="info.date"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                :disabled="info.disabled"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6"></el-col>
          <el-col :span="6"></el-col>
        </el-row>
      </template>
<!--      休假-->
      <template v-if="info.type == 3">
        <el-form-item label="休假名称">
          <el-input v-model="info.title" placeholder="休假名称" class="w300" :disabled="info.disabled"></el-input>
        </el-form-item>

        <el-form-item label="休假日期">
          <el-date-picker
            v-model="info.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :disabled="info.disabled"
          >
          </el-date-picker>
        </el-form-item>

      </template>
        <el-form-item label="附件">
          <el-row>
            <el-col :span="18">
          <uploadFile :params="fileParams"></uploadFile>
            </el-col>
          </el-row>
        </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="info.desc" type="textarea" maxlength="1500" show-word-limit :row="2" style="width:60%;" :disabled="info.disabled"></el-input>
      </el-form-item>

      <el-form-item style="text-align: center;" v-if="info.is_hidden">
        <el-button type="primary" @click="editAdmin(0)">{{info.btn}}</el-button>
        <el-button type="primary" @click="editAdmin(1)">保存</el-button>
        <el-button @click="resetForm">取消</el-button>
      </el-form-item>
    </el-form>
  </el-main>
    <el-footer style="padding: 0px;">
      <spForm :form="spform" v-if="info.is_hidden"></spForm>
      <history :history="history"></history>
    </el-footer>
</el-container>
</template>

<script>
    import topNavbar from "../common/topNavbar";
    import {getAdminDetail, editBaoXiao} from "@/apilist/Admin"
    import uploadFile from "../common/uploadFile";
    import spForm from "../common/spForm";
    import history from "../common/history";
    export default {
        name: "adminDetail",
        data(){
           return {
               id:0,
               title: '',
               path: '/administrative',
               titleName: '行政数据',
               info:{},
               history: [],
               baseinfo: {},
               fileParams: {
                   dir:'admin',
                   fileList: [],
               },
               spform:{
                   note:'',//审批备注
                   newData:'',
                   type: 'xz',
               },
               tracfficList: this.fun.tracfficList,
               tracfficArea:this.fun.tracfficArea,
           }
        },
        components: {topNavbar,uploadFile,spForm,history},
        methods: {
          getDetail(){
              getAdminDetail({id: this.id}).then(res => {
                  let info = res.data
                  this.info = info
                  this.history = info.history
                  this.baseinfo = info.baseinfo
                  this.fileParams.fileList = info.fileList
                  this.spform.newData = info
              })
          },
            editAdmin(is_save) {
              let params = {
                  id: this.id,
                  newData: this.info,
                  is_save: is_save
              };
                editBaoXiao(params).then(res => {
                    if(res.state == 'ok'){
                        this.$message({
                            type: 'success',
                            message: res.msg,
                            onClose: () => {
                               this.getDetail();
                            }
                        });
                    }
                });


            },
            resetForm(){

            },
            calculateFee(){
                this.info.money = this.info.people_num * 30;
            }

        },
        mounted() {
            const {id,title} = this.$route.query
            this.id = id
            this.title = title
            this.getDetail()
        }
    }
</script>

<style scoped>

</style>
